<form class="layui-form" action="">

    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="200">
                <col width="200">
                <col width="130">
                <col width="100">
                <col width="150">
                <col width="150">
                <col width="350">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>打印机型号</th>
                <th>耗材型号</th>
                <th>打印页数</th>
                <th>采购单价/支</th>
                <th>采购数量</th>
                <th>合计</th>
                <!--<th>状态</th>-->
                <th>备注</th>
            </tr>
            </thead>
            <tbody>

            {for start="1" end="8"}
                <tr>
                    <!--<td>-->
                    <!--<i class="layui-icon layui-icon-subtraction"></i>-->
                    <!--<i class="layui-icon layui-icon-addition"></i>-->
                    <!--</td>-->
                    <td>
                        <div class="layui-input-inline">
                            <select name='print_type[]' lay-filter="print_type" data-index="{$i}">
                                <option value="M7105DN" selected="">M7105DN</option>
                                <option value="CM8505DN/M9505DN">CM8505DN/M9505DN</option>
                                <option value="CM7115DN">CM7115DN</option>
                                <option value="P5515DN">P5515DN</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <select name="consumable_type[]" id="consumable_type_{$i}" data-index="{$i}" lay-filter="consumable_type">
                                <option value="">请选择</option>
                                <option value="粉盒TL-413">粉盒TL-413</option>
                                <option value="粉盒TL-413H">粉盒TL-413H</option>
                                <option value="鼓组件DL-413">鼓组件DL-413</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <input type="text" id="page_num_{$i}" name="page_num[]"  autocomplete="off"
                               class="layui-input">
                    </td>
                    <td>
                        <input type="text" id="price_{$i}" name="price[]"  autocomplete="off"
                               class="layui-input">
                    </td>
                    <td>
                        <input type="text" id="num" data-index="{$i}" name="num[]"  autocomplete="off"
                               class="layui-input">
                    </td>
                    <td>
                        <input type="text" id="price_total_{$i}" name="price_total[]"  autocomplete="off"
                               class="layui-input">
                    </td>
                    <!--<td></td>-->
                    <td>
                        <input type="text" name="comment[]"  autocomplete="off" class="layui-input">
                    </td>
                </tr>
            {/for}
            </tbody>
        </table>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="text-align: center">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;
        //日期
//        laydate.render({
//            elem: '#reasons_time'
//            , type: 'month'
//        });
        //得到耗材型号
        function get_consumable_type(data, index) {
            var params = {
                print_type: data.value
            };
            console.log(index);
            $.ajax({
                url: '{:url("/printer/Consumable/get_consumable_type")}',
                dataType: 'json',
                type: 'post',
                data: params,
                success: function (data) {
                    $('#consumable_type_' + index).empty();
                    var page_num = $("#page_num_" + index);
                    var price = $("#price_" + index);
                    page_num.val('');
                    price.val('');
                    $('#consumable_type_' + index).append(new Option('', '请选择'));
                    $.each(data, function (key, item) {
                        $('#consumable_type_' + index).append(new Option(item.consumable_type, item.consumable_type));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        };

        //得到页数和价格
        function get_page_price(data, index) {
            var params = {
                consumable_type: data.value
            }
            //检查项目添加到下拉框中
            $.ajax({
                url: '{:url("/printer/Consumable/get_page_price")}',
                dataType: 'json',
                data: params,
                type: 'post',
                success: function (data) {
                    var page_num = $("#page_num_" + index);
                    var price = $("#price_" + index);
                    page_num.val('');
                    price.val('');
                    page_num.val(data.page_num);
                    price.val(data.price);
                }
            });
        };
        // 联动
        form.on('select(print_type)', function (data) {
            var index = data.elem.dataset.index;
            get_consumable_type(data, index);
        });
        form.on('select(consumable_type)', function (data) {
            var index = data.elem.dataset.index;
            get_page_price(data, index);
        });


        //计算总价格
        function price_total(price, num, index) {
            $('#price_total_' + index).val(price * num);
        }

        $(document).on('change', '#num', function () {
            var index = $(this).data('index');

            var price = $('#price_' + index).val();
            var num = $(this).val();
            price_total(price, num, index);
        });


        //监听提交
        form.on('submit(addData)', function (data) {
            $.ajax({
                url: '{:url("/printer/Inventory/add")}',
                type: 'post',
                dataType: 'json',
                data: data.field,
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg('添加成功', {icon: 1});
                        return false;
                    }
                    layer.alert(res.msg, {icon: 2});
                    return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
            return false;
        });
    });
</script>